<template>
  <div class="AdminMenu">
    <div class="loadBox"></div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }"
        ><i class="lh lh-sys fw_100"></i
      ></el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content_Box box-shadow mt_15">
      <div class="mb_10 align-left pr_10">
        <span class="addOK" @click="addAdminBtn">新增主菜单</span>
      </div>
      <div class="tableMaxBox">
        <template>
          <el-table :data="menuList" stripe>
            <el-table-column
              prop="name"
              :show-overflow-tooltip="true"
              fixed
              label="菜单名称"
            ></el-table-column>
            <el-table-column
              prop="model"
              :show-overflow-tooltip="true"
              fixed
              label="IconUrl"
            ></el-table-column>
            <el-table-column
              prop="sort"
              :show-overflow-tooltip="true"
              fixed
              label="排序"
            ></el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="{ row, $index }">
                <el-link
                  :underline="false"
                  type="primary"
                  class="InfoFont"
                  @click="goToChildMenu(row)"
                  >管理子菜单</el-link
                >
                <el-link
                  :underline="false"
                  type="primary"
                  class="InfoFont"
                  @click="redactBtn(row)"
                  >编辑</el-link
                >
                <el-link
                  :underline="false"
                  type="danger"
                  class="InfoFont"
                  @click="deleteAdmin(row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <!-- 添加/编辑主菜单 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="addMenuShow"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>主菜单名称：</span>
          </div>
          <div class="fl">
            <el-input
              v-model="addMenuData.name"
              placeholder="请输入主菜单名称"
            ></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>iconURL：</span>
          </div>
          <div class="fl">
            <el-input
              v-model="addMenuData.model"
              placeholder="请输入主菜单URL"
            ></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>排序：</span>
          </div>
          <div class="fl">
            <el-input
              v-model="addMenuData.sortMenu"
              placeholder="请输入菜单序号"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addMenuBtn">确 定</span>
        <span class="resetBtn" @click="addMenuShow = false">取 消</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
var common = require('../../static/tool.js')
import { mainfun } from '../assets/js/main.js'
import { publicData } from '../assets/js/data.js'
export default {
  name: 'AdminMenu',
  data() {
    return {
      windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
      screenHeight: document.documentElement.clientHeight,
      manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')),
      url: common.url,
      adminList: [], //所以数据
      addMenuShow: false, //添加主菜单弹框
      active: '1', //1、添加  2、编辑
      menuList: [], //获取权限管理
      addMenuData: {
        id: '',
        name: '',
        parent_id: '0',
        level: '1',
        model: '',
        desc: '',
        sortMenu: '',
      }, //添加主菜单的数据
      diaTitle: '', //弹框title
      channel: 1 //区分渠道
    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.channel = val.query.channel
        this.startResult()
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    // this.startResult()
  },
  methods: {
    startResult() {
      if (!sessionStorage.getItem('manageInfo')) {
        // 判断是否登录
        window.location = 'login.html'
        return
      }
      this.getListPermissions()
    },
    getListPermissions() {
      //获取权限列表
      let fn = new FormData()
      fn.append('role_id', '') //页码
      //fn.append('level','1'); //主菜单
      fn.append('channel', this.channel) //区分渠道
      this.$http.post(this.url + '/menu/menulist', fn).then(
        (res) => {
          if (res.data.msg == '查询成功' || res.data.code == '200') {
            this.menuList = res.data.data
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: (action) => {
                window.location = 'login.html'
              },
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        (res) => {
          this.$message.error('网络错误！')
          return
        }
      )
    },

    handleCurrentChange(val) {
      //切换页数
      this.pageNum = val
      this.getEnterprise(this.pageNum, this.pageSizeNow)
    },
    handleSizeChange(val) {
      //切换每页条数
      this.pageSizeNow = val
      this.pageNum = 1
      this.getEnterprise(this.pageNum, this.pageSizeNow)
    },

    // 添加主菜单
    addAdminBtn() {
      this.active = '1' //1、添加  2、编辑
      this.addMenuShow = true
      this.diaTitle = '添加主菜单'
      this.addMenuData = { id: '', name: '', parent_id: '0', level: '1', model: '', desc: '', sortMenu: '' } //添加主菜单的数据
    },
    //编辑主菜单
    redactBtn(row) {
      this.active = '2' //1、添加  2、编辑
      this.addMenuData.id = row.id
      this.addMenuData.name = row.name
      this.addMenuData.parent_id = row.parent_id
      this.addMenuData.level = row.level
      this.addMenuData.model = row.model
      this.addMenuData.sortMenu = row.sort
      this.addMenuShow = true
      this.diaTitle = '编辑主菜单'
    },
    // 提交添加主菜单/修改
    addMenuBtn() {
      if (this.addMenuData.name == '' || this.addMenuData.model == '' || this.addMenuData.sortMenu == '') {
        this.$message.error('请输入必填项！')
        return
      }
      if (isNaN(this.addMenuData.sortMenu)) {
        this.$message.error('排序请输入数字！')
        return
      }
      if (this.active == '1') {
        //添加
        let fn = new FormData()
        fn.append('name', this.addMenuData.name) //权限名称
        fn.append('parent_id', this.addMenuData.parent_id) //父级别ID
        fn.append('level', this.addMenuData.level) //权限级别(共三级1、2、3)
        fn.append('model', this.addMenuData.model) //权限作用域  地址
        fn.append('sort', this.addMenuData.sortMenu) //排序
        fn.append('channel', this.channel) //区分渠道
        this.$http.post(this.url + '/menu/addmenu', fn).then(
          (res) => {
            if (res.data.msg == '查询成功' || res.data.code == '200') {
              this.$message.success(res.data.msg)
              this.addMenuShow = false //关闭弹框
              this.getListPermissions()
            } else if (res.data.code == '8886') {
              //code   8886  登录过期
              sessionStorage.clear()
              this.$alert('登录已过期，请重新登录 !', '提示', {
                confirmButtonText: '确定',
                callback: (action) => {
                  window.location = 'login.html'
                },
              })
              return
            } else {
              this.$message.error(res.data.msg)
              return
            }
          },
          (res) => {
            this.$message.error('网络错误！')
            return
          }
        )
      } else if (this.active == '2') {
        //修改
        let fn = new FormData()
        fn.append('id', this.addMenuData.id) //id
        fn.append('name', this.addMenuData.name) //权限名称
        fn.append('model', this.addMenuData.model) //权限作用域  地址
        fn.append('sort', this.addMenuData.sortMenu) //排序
        fn.append('channel', this.channel) //区分渠道
        this.$http.post(this.url + '/menu/menuedit', fn).then(
          (res) => {
            if (res.data.msg == '查询成功' || res.data.code == '200') {
              this.$message.success(res.data.msg)
              this.addMenuShow = false //关闭弹框
              this.getListPermissions()
            } else if (res.data.code == '8886') {
              //code   8886  登录过期
              sessionStorage.clear()
              this.$alert('登录已过期，请重新登录 !', '提示', {
                confirmButtonText: '确定',
                callback: (action) => {
                  window.location = 'login.html'
                },
              })
              return
            } else {
              this.$message.error(res.data.msg)
              return
            }
          },
          (res) => {
            this.$message.error('网络错误！')
            return
          }
        )
      }
      this.addMenuData = { id: '', name: '', parent_id: '0', level: '1', model: '', desc: '', sortMenu: '' } //添加主菜单的数据
    },
    // 删除主菜单
    deleteAdmin(row) {
      this.$confirm('此操作将删除主菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let fn = new FormData()
          fn.append('id', row.id)
          fn.append('channel', this.channel) //区分渠道
          this.$http.post(this.url + '/menu/delemenu', fn).then(
            (res) => {
              if (res.data.msg == '查询成功' || res.data.code == '200') {
                this.$message.success(res.data.msg)
                this.getListPermissions()
              } else if (res.data.code == '8886') {
                //code   8886  登录过期
                sessionStorage.clear()
                this.$alert('登录已过期，请重新登录 !', '提示', {
                  confirmButtonText: '确定',
                  callback: (action) => {
                    window.location = 'login.html'
                  },
                })
                return
              } else {
                this.$message.error(res.data.msg)
                return
              }
            },
            (res) => {
              this.$message.error('网络错误！')
              return
            }
          )
        })
        .catch(() => { })
    },
    goToChildMenu(row) {
      //去子菜单
      this.$router.push({
        path: '/adminChildMenu',
        query: {
          id: row.id,
          channel: this.channel
        },
      })
    },
  },
  filters: {},
}
</script>

<style scoped>
.row_box {
  height: 50px;
  line-height: 48px;
}
.row_box > div:nth-child(1) {
  width: 125px;
  text-align: right;
}
.row_box > div:nth-child(2) {
  width: 300px;
}
.lhadmin-wujiaoxing {
  font-size: 12px;
  margin-right: 5px;
  color: var(--red3);
}
.dialog-footer {
  padding-left: 125px;
  text-align: left;
}
@media (max-width: 767.78px) {
}

/* 上传 */
</style>



// WEBPACK FOOTER //
// src/components/AdminMenu.vue